<template>
	<div class="musiclist">
		<el-carousel :interval="6000" type="card" height="230px" indicator-position="none">
			<template  v-for="(item,index) in musiclist">
				<el-carousel-item v-if="index<3" :key="item.id">
					<div @click="musicdetail(item.id)" class="imgbox">
						<img :src="item.coverImgUrl" alt="" />
						<div class="play">
							<i class="iconfont icon-bofang1"></i>
						</div>
						<div class="numbers">
							<i class="iconfont icon-bofang1"></i>
							<span>{{item.playCount}}</span>
						</div>

					</div>
					<p>{{item.name}}</p>

				</el-carousel-item>
			</template>
		</el-carousel>

		<div class="morelist">
			<template  v-for="(item,index) in musiclist">
				<div @click="musicdetail(item.id)" class="musicnew" v-if="index>=3">
					<div class="pic_box">
						<img :src="item.coverImgUrl" alt="" />
						<div class="numbers">
							<i class="iconfont icon-bofang1"></i>
							<span>{{item.playCount}}</span>
						</div>
					</div>
					<p>
						{{item.name}}
					</p>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		name: "musiclist",
		data() {
			return {
				musiclist: [],

			}
		},
		created() {
			this.$http.get("/top/playlist", {
				params: {
					order: "推荐"
				}
			}).then(res => {
				console.log(res)
				res.data.playlists.forEach((val, index) => {
					
					if(val.playCount > 10000) {
						val.playCount = parseInt(val.playCount / 10000) + "万"
					}

				})
				this.musiclist = res.data.playlists
			})
		},
		methods:{
			musicdetail(id){
				this.$router.push({
					name:"musiclistdetail",
					query:{
						idx:id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/common.scss";
	.musiclist {
		.el-carousel__item {
			.imgbox {
				width: 100%;
				height: vw(180);
				overflow: hidden;
				position: relative;
				.el-carousel__mask {
					background-color: #acacac;
				}
				.play {
					position: absolute;
					bottom: 6px;
					right: 6px;
					width: vw(30);
					height: vw(30);
					text-align: center;
					line-height: vw(30);
					border-radius: 50%;
					background-color: rgba(255,255,255,.6);
					i {
						font-size: vw(14);
						color: red;
					}
				}
				img {
					width: 100%
				}
			}
			p {
				padding: vw(6);
				box-sizing: border-box;
				height: vw(40);
				font-size: vw(12);
				background-color: white;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				box-shadow: 0px 1px 9px #dfdfdf;
			}
			.numbers {
				position: absolute;
				top: 6px;
				right: 6px;
				color: white;
				font-size: vw(10);
				i {
					font-size: vw(6);
				}
			}
		}
		.morelist {
			margin: vw(16) 0 0;
			display: flex;
			justify-content: space-between;
			padding: 0 vw(16);
			flex-wrap: wrap;
			.musicnew {
				width: 32%;
				text-align: left;
				font-size: vw(10);
				color: #333;
				margin: vw(10) 0;
				.pic_box {
					width: 100%;
					height: vw(100);
					overflow: hidden;
					position: relative;
					border-radius: vw(6);
					img {
						width: 100%;
					}
					.numbers {
						position: absolute;
						top: 6px;
						right: 6px;
						color: white;
						font-size: vw(10);
						i {
							font-size: vw(6);
						}
					}
				}
				p {
					margin: vw(6) 0 0;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical
				}
			}
		}
	}
</style>